// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common

GraphicsBox {
  property var disable_cards: []
  property var ok_options: []
  property var selected_ids: []

  property int playergold

  property var all_cards: []
  property string skill_name: ""
  property string detail_content: ""

  id: root
  title.text: Lua.tr("$Choice").arg(Lua.tr(skill_name))
  width: 550
  height: title.height + (all_cards.length > 0 ? cardsContainer.height : 0) + 100

  Component {
    id: cardDelegate
    CardItem {
      scale: 0.72
      Component.onCompleted: {
        setData(modelData);
      }
      autoBack: false
      showDetail: true
      selectable: !disable_cards.includes(cid)
      Text {
        id: cardprice
        anchors.centerIn: parent
        // anchors.topMargin: 50
        // width: 50
        // height: 50
        text: "$:" + modelData.price
        color: "blue"
        font.bold: true
        // wrapMode: Text.WordWrap
        font.pixelSize: 20
        textFormat: TextEdit.RichText
      }
      onSelectedChanged: {
        // console.log(index)
        if (selected) {
          chosenInBox = true;
          root.selected_ids.push({cid : cid,price : modelData.price});          
        } else {
          chosenInBox = false;
          let remidx = 0;
          for(let i = 0;i < root.selected_ids.length;i++){
            if(root.selected_ids[i].cid === modelData.cid) {
              remidx = i;
              break;
            }
          }
          root.selected_ids.splice(remidx, 1);
        }
        root.selected_idsChanged();
      }
    }
  }

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 75
    width: parent.width - 10
    height: talkcontent.height
    clip: true
    Text {
      id: talkcontent
      width: parent.width
      // height: parent.height
      text: detail_content
      color: "white"
      wrapMode: Text.WordWrap
      font.pixelSize: 16
      textFormat: TextEdit.RichText
    }
  }


  Flickable {
    id: cardsContainer
    visible: all_cards.length > 0 ? true : false
    flickableDirection: Flickable.AutoFlickIfNeeded
    width: 500
    height: Math.min(cardsList.height,300)
    // anchors.fill: parent
    anchors.top: decontent.bottom
    // anchors.topMargin: 1
    anchors.left:decontent.left
    anchors.leftMargin: 10

    contentWidth: cardsList.width
    contentHeight: cardsList.height + 20
    clip: true

    GridLayout {
      id: cardsList
      columns: 5
      columnSpacing: -10
      rowSpacing: -10
      anchors.top: parent.top
      Repeater {
        id: to_select
        model: all_cards
        delegate: cardDelegate
      }
    }
  }

  Item {
    id: buttonArea
    anchors.bottom:root.bottom
    anchors.bottomMargin: 5
    anchors.left:decontent.left
    anchors.leftMargin: root.width / 2 - 40
    height: 40

    Row {
      anchors.verticalCenter: parent.verticalCenter
      anchors.bottom: parent.bottom
      spacing: 8

      Repeater {
        model: ok_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: updatebtn(index)

          onClicked: {
            roomScene.state = "notactive";
            if (modelData === "Exist"){
              root.selected_ids = {}
            }
            const reply = 
              {
                cards: root.selected_ids,
              }
            ;
            ClientInstance.replyToServer("", reply);
            close();
          }
        }
      }
    }
  }

  function updatebtn(idx) {
    // return true
    if(idx == ok_options.length - 1){
      return true
    }else{
      if(selected_ids.length == 0){
        return false
      }else{
        let add = 0
        for(let i = 0;i < selected_ids.length;i++){
          add = add + selected_ids[i].price
        }
        return playergold >= add ? true : false
      }
    }
  }

  function loadData(data) {
    // console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    // all_cards = data[2];
    all_cards = data[2] ? data[2].map(da => {
      let newdata = Lua.call("GetCardData", da.cid);
      newdata.price = da.price
      return newdata;
    }) : []; 
    ok_options = data[3]
    playergold = data[4]
    selected_ids = []
  }
}
